<template>
  <!-- 表格分组 -->
  <div
    v-if="col.group"
    class="body-col-group"
    :class="{
      [bgClass]: !row[col.name]?.length && Boolean(bgClass),
    }"
    :style="{ flex: col.width ? `0 0 ${col.width}px` : 1 }"
  >
    <div
      v-for="(groupItem, groupIndex) in row[col.name]"
      :key="groupItem[primaryKey] || groupIndex"
      class="body-col"
      :class="{
        flex: col.flex,
        alignCenter: col.alignCenter,
        [getGroupBgClass(groupItem)]: true,
      }"
      @contextmenu="(e) => onContextmenu(e, row, groupItem, col)"
    >
      <div v-if="colIndex === 0" class="body-col-expand-box">
        <expand-icon
          :show="groupItem.hasChildren"
          :expand="groupItem.expand"
          @click.stop="() => toggleExpand(groupItem)"
        />
      </div>

      <table-cell-content :name="col.name" :col="col" :row="groupItem" />
    </div>
  </div>
  <!-- 非分组 -->
  <div
    v-else
    class="body-col"
    :class="{
      flex: col.flex,
      alignCenter: col.alignCenter,
      [bgClass]: Boolean(bgClass),
    }"
    :style="{
      flex: col.width ? `0 0 ${col.width}px` : 1,
      'padding-left': colIndex === 0 && level > 1 ? `${(level - 1) * 22 + 10}px` : '10px',
    }"
    @contextmenu="(e) => onContextmenu(e, row, row, col)"
  >
    <div v-if="colIndex === 0" class="body-col-expand-box">
      <expand-icon
        :show="row.hasChildren"
        :expand="row.expand"
        @click.stop="() => toggleExpand(row)"
      />
    </div>

    <table-cell-content :name="col.name" :col="col" :row="row" />
  </div>
</template>

<script lang="ts" setup>
import { inject, computed } from "vue";
import { VarTableColumn } from "@/constants/types";

import TableCellContent from "./TableCellContent.vue";
import ExpandIcon from "./ExpandIcon.vue";

const props = defineProps<{
  row: any;
  index: number;
  total: number;
  col: VarTableColumn;
  colIndex: number;
  level: number;
}>();

const emit = defineEmits<{
  (e: "toggleExpand", row: any): void;
  (
    e: "contextmenu",
    evt: MouseEvent,
    row: any,
    item: any,
    col: VarTableColumn
  ): void;
}>();

const primaryKey = inject("primaryKey") as string;

const bgClass = computed(() => {
  if (props.col.name !== "name") {
    if (props.row.status === "red") {
      return "red-bg";
    } else if (props.row.status === "green") {
      return "green-bg";
    } else if (props.row.status === "white") {
      return "white-bg";
    }
  }
  return '';
});

const getGroupBgClass = (groupRow: any) => {
  if (groupRow.valid === true) {
    return 'green-bg';
  }
  if (groupRow.valid === false) {
    return 'red-bg';
  }
  return '';
};

const toggleExpand = (row: any) => {
  row.expand = !row.expand;
  emit("toggleExpand", row);
};

const onContextmenu = (
  e: MouseEvent,
  row: any,
  item: any,
  col: VarTableColumn
) => {
  emit("contextmenu", e, row, item, col);
};
</script>

<style lang="scss">
@import "@/assets/css/app.scss";

.body-col {
  position: relative;
  flex: 1;
  min-height: 24px;
  font-weight: 400;
  font-size: 11px;
  color: #000000;
  box-sizing: border-box;
  padding: 3px 10px;
  overflow: hidden;

  &:not(:first-child) {
    border-left: 1px solid $black-e0;
  }

  &.flex {
    display: flex;
  }

  &.alignCenter {
    align-items: center;
  }

  &.red-bg {
    background-color: rgb(248, 226, 221);
    .el-input__inner {
      background-color: rgb(248, 226, 221);
    }
  }

  &.green-bg {
    background-color: rgb(225, 244, 215);
    .el-input__inner {
      background-color: rgb(225, 244, 215);
    }
  }

  &.white-bg {
    background-color: white;

    .el-input__inner {
      background-color: white;
    }
  }

  .body-col-expand-box {
    position: relative;
    top: -2px;
    white-space: nowrap;
  }
}

.body-col-group {
  flex: 1;
  display: grid;
  box-sizing: border-box;

  &:not(:first-child) {
    border-left: 1px solid $black-e0;
  }

  .body-col:not(:last-child) {
    border-bottom: 1px solid $black-e0;
  }

  .body-col {
    border-left: 0 !important;
  }

  &.red-bg {
    background-color: rgb(248, 226, 221);
    .el-input__inner {
      background-color: rgb(248, 226, 221);
    }
  }

  &.green-bg {
    background-color: rgb(225, 244, 215);
    .el-input__inner {
      background-color: rgb(225, 244, 215);
    }
  }

  &.white-bg {
    background-color: white;

    .el-input__inner {
      background-color: white;
    }
  }
}
</style>
